<template>
  <el-dialog title="组合SKU信息" v-model="visible" align-center width="900px" @close="handleClose" :close-on-click-modal="false" :append-to-body="true">
    <el-descriptions>
      <el-descriptions-item label="组合SKU：">
        <span>{{ formData.sku }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="组合自定义SKU：">{{ formData.custom_sku }}</el-descriptions-item>
      <!-- <el-descriptions-item label="赛盒SKU：">{{ formData.i_robot_box_sku }}</el-descriptions-item> -->
    </el-descriptions>
    <el-table :data="formData.tableData" style="width: 100%">
      <el-table-column prop="sku" label="SKU" min-width="180" />
      <el-table-column prop="custom_sku" label="自定义SKU" min-width="200" />
      <!-- <el-table-column prop="i_robot_box_sku" label="赛盒SKU" width="120" /> -->
      <el-table-column prop="quantity" label="数量" width="80" />
      <el-table-column prop="inventory" label="库存" width="80">
        <template #default="{ row }">
          <span class="cursor-pointer text-[#3487ff]" @click="openAvailableStock(row)">{{ row.inventory }}</span>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
const visible = ref(false)
const formData = ref({
  tableData: [],
})
const emit = defineEmits(["openStock"])
const openAvailableStock = (row) => {
  console.log(row)
  // emit('openStock', row)
  emit("openStock", "inventory", row)
}
// 打开弹窗
const open = async (id) => {
  visible.value = true
}
// 关闭弹窗
const close = () => {
  visible.value = false
  formData.value = {
    tableData: [],
  }
}
const handleClose = () => {
  visible.value = false
}
defineExpose({
  open,
  formData,
})
</script>
<style lang="scss" scoped>
:deep(.el-descriptions__label:not(.is-bordered-label)) {
  margin-right: 0;
}
</style>
